<script setup lang="ts">
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import {computed, type Reactive, watch,} from "vue";
import {Cluster} from "@/modal/GardenCrop";

interface iCluster {
  cluster: Reactive<Cluster>;
}

const props = defineProps<iCluster>();
const cluster: Reactive<Cluster> = props.cluster;
const cluster_isRipen = computed(() => cluster.isRipen);
watch(cluster_isRipen, () => {
  cluster.getAward();
})
</script>

<template>
  <div class="flower-items container-fluid">
    <div class="icons">
      <div class="desc user-select-none"
           :class="`desc-${cluster.direction}`">
        {{ cluster.chineseName }}
      </div>
      <div class="icons-out"
           :class="{active: cluster.isConnected}">
        <IconFont :icon-type="IconType.FLOWER_PASSIVE"
                  :color="cluster.isConnected? IconColor.NULL:IconColor.FLOWER_PASSIVE"
                  :inside-icon="true"
                  font-size="xx-large">
          <template #inside>
            <div class="slot-icon-in"
                 :class="{active: cluster.isConnected}">
              <IconFont :icon-type="IconType.FLOWER"
                        :color="cluster.isConnected? IconColor.FLOWER:IconColor.FLOWER_PASSIVE"
                        font-size="x-large"
              ></IconFont>
            </div>
          </template>
        </IconFont>
      </div>
    </div>
  </div>
</template>

<style scoped>
.flower-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

.desc {
  position: absolute;
  width: 50px;
  top: 12px;
  left: -8px;
  color: rgb(212, 35, 122);
  font-family: "microsoft yahei", "Microsoft YaHei UI Light", Consolas, "system-ui";
}

.desc-left {
  left: -54px;
}

.desc-right {
  left: 35px;
}

.desc-top {
  top: -15px;
}

.desc-bottom {
  top: 40px;
}

.container, .icons {
  position: relative;
}

.icons-out.active ::v-deep .origin-iconfont {
  color: transparent !important;
}

.slot-icon-in.active {
  animation: spin 6s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    scale: 1;
    transform-origin: 12px 16px;
  }
  50% {
    transform: rotate(720deg);
    scale: 1.4;
    transform-origin: 12px 16px;
  }
  100% {
    transform: rotate(1440deg);
    scale: 1;
    transform-origin: 12px 16px;
  }
}

.icons-out.active {
  animation: spins 5s 1s linear infinite;
  transition-delay: 1.03s;
}


@keyframes spins {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>